import React, { memo } from "react";
import "./nav.less";
import { NavLink, useNavigate } from "react-router-dom";

import { useSelector } from "react-redux";

// 不会变的内容直接写组件的外面
const navList = [
  {
    title: "热映",
    url: "/hot",
  },
  {
    title: "影院",
    url: "/cinema",
  },
  {
    title: "待映",
    url: "/wait",
  },
  {
    title: "经典电影",
    url: "/classic",
  },
];

const Nav = memo(() => {
  const navigate = useNavigate();
  const cityname = useSelector((state) => state.city.cityname);

  const goCity = () => {
    navigate("/city");
  };

  return (
    <div className="nav">
      <span className="city" onClick={goCity}>
        {cityname}
      </span>
      <ul>
        {navList.map((item) => {
          return (
            <li key={item.url}>
              <NavLink to={"/home/movies" + item.url}>{item.title}</NavLink>
            </li>
          );
        })}
      </ul>
      <span className="iconfont icon-sousuo"></span>
    </div>
  );
});

export default Nav;
